import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Button, Checkbox, Table, Space } from 'antd';
import loadable from '@loadable/component';

import { setStore } from '@/reducers/common';
import styles from './index.module.scss';

// 确认弹框
const Confirm = loadable(() => import('@/pages/components/Confirm'));

export default props => {
    const initState = () => ({
        loading: false,
        dataList: [
            {id: 1, subject: '测试', content: '测试', created_at: '2023-01-01 10:00:00', read: false},
            {id: 2, subject: '测试2', content: '测试2', created_at: '2023-01-02 10:00:00', read: true},  
            {id: 3, subject: '测试3', content: '测试3', created_at: '2023-01-03 10:00:00', read: false},
            {id: 4, subject: '测试4', content: '测试4', created_at: '2023-01-04 10:00:00', read: true},
            {id: 5, subject: '测试5', content: '测试5', created_at: '2023-01-05 10:00:00', read: false},
        ],
        pageNo: 1,
        pageSize: 10,
        total: 0,
    });
    const [ state, setState ] = useState(initState);
    const { userInfo={} } = useSelector(s => s.common || {});
    const dispatch = useDispatch();

    // 获取消息列表
    const getMessages = (options={}) => {};

    // 分页改变
    const handlePaginationChange = (pageNo, pageSize) => {
        getMessages({pageNo, pageSize});
    };

    // 全选改变
    const handleCheckedAll = (e) => {};
    // 单个改变
    const handleCheckedOne = (item, e) => {
        e.preventDefault();
        e.stopPropagation();


    };
    // 已读
    const handleRead = (item, e) => {
        e.preventDefault();
        e.stopPropagation();
    };
    // confirm删除模块 - begin
    // 删除
    const handleDelete = (item, e) => {
        e.preventDefault();
        e.stopPropagation();

        const confirmObj = {
            showConfirm: true,
            confirmTitle: '删除站内信',
            confirmDesc: '您确定要删除该条消息吗？',
            confirmWarn: '',
            confirmLoading: false,
        };
        
        setState(o => ({...o, confirmInfo: confirmObj}));
    };
    const cancelDelete = () => {
        setState(o => ({
            ...o,
            confirmInfo: {},
        }));
    };
    const okDelete = () => {
        // 请求接口，确认删除，然后调用 cancelDelete
        // TODO
        setState(o => ({...o, confirmInfo: {...o.confirmInfo, confirmLoading: true}}));

        setTimeout(() => {
            cancelDelete();
        }, 2000);
        
    };
    // confirm删除模块 - end
    // 点击行
    const handleRowClick = (item) => {};

        // 渲染列
    const renderColumn = () => {
        return [
            {
                title: '',
                dataIndex: 'check',
                key: 'check',
                width: 30,
                fixed: 'left',
                render: (t, o) => <Checkbox checked={state.checkedAll} onChange={handleCheckedOne.bind(null, o)} />
            },
            {
                title: '主题',
                dataIndex: 'subject',
                key: 'subject',
            },
            {
                title: '内容',
                dataIndex: 'content',
                key: 'content',
            },
            {
                title: '时间',
                dataIndex: 'created_at',
                key: 'created_at',
            },
            {
                title: '操作',
                dataIndex: 'act',
                key: 'act',
                width: 80,
                fixed: 'right',
                className: styles['act'],
                render: (t, o) => {
                    return (
                        <div className={styles['b-act']}>
                            { o.read ? null : <Button onClick={handleRead.bind(null, o)} variant="text" color="primary" size="small">已读</Button>}
                            <Button onClick={handleDelete.bind(null, o)} variant="text" color="primary" size="small">删除</Button>
                        </div>
                    )
                }
            },
        ]
    };

    useEffect(() => {
        getMessages();
    }, []);

    return (
        <>
            <div className={styles['container']}>
                <div className={styles['action']}>
                    <Space wrap size="small">
                        <Checkbox checked={state.checkedAll} onChange={handleCheckedAll} />
                        <Button>删除</Button>
                        <Button>标记已读</Button>
                        <Button>全部已读</Button>
                        <Button>全部删除</Button>
                    </Space>
                </div>
                <div className={styles['table']}>
                    <Table
                        loading={state.loading}
                        dataSource={state.dataList || []}
                        columns={renderColumn()}
                        rowKey={o => o.id}
                        rowClassName={o => `${styles['row']} ${o.read ? styles['read'] : ''}`}
                        onRow={record => {
                            return {
                                onClick: handleRowClick.bind(null, record),
                            }
                        }}
                        pagination={{
                            position: ['bottomCenter'],
                            hideOnSinglePage: true, // 只有一页时隐藏分页
                            current: state.pageNo,
                            pageSize: state.pageSize,
                            total: state.total,
                            onChange: handlePaginationChange,
                        }}
                    />
                </div>
            </div>

            <Confirm
                {...(state.confirmInfo||{})}
                onCancel={cancelDelete}
                onOk={okDelete}
            />
        </>
    )
}
